<template>
  <div id="carbonTradeList">
    <div class="title">碳交易记录</div>
<!--    <h1 style="color: #000000">碳交易记录</h1>-->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 2%">
      <el-form-item label="区块链交易ID">
        <el-input v-model="queryParams.blockchainId" placeholder="区块链交易ID" clearable />
      </el-form-item>
      <el-form-item label="卖方ID">
        <el-input v-model="queryParams.sellerId" placeholder="卖方ID" clearable />
      </el-form-item>
      <el-form-item label="交易日期">
        <el-date-picker
          v-model="queryParams.startTime"
          type="date"
          placeholder="Pick a date"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Query</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe style="min-height: 480px">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="blockchainId" label="区块链编号" width="180" />
      <el-table-column prop="buyerId" label="买方ID" />
      <el-table-column prop="sellerId" label="卖方ID" width="180" />
      <el-table-column prop="amount" label="数量" width="180" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="tradeTime" label="交易日期">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{
              moment(scope.row.tradeTime).format('YYYY-MM-DD  h:mm')
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header> 操作</template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)" type="primary"
            >查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogTableVisible" title="交易详细" width="800">
      <el-form :data="gridData">
        <el-form-item prop="BlockHash" label="Block Hash" width="150">
          {{ gridData.blockHash }}
        </el-form-item>
        <el-form-item prop="BlockHeight" label="Block Height" width="200">
          {{ gridData.blockNumber }}
        </el-form-item>
        <el-form-item prop="Gas" label="Gas"> {{ gridData.gas }}</el-form-item>
        <el-form-item prop="From" label="From" width="200"> {{ gridData.from }}</el-form-item>
        <el-form-item prop="To" label="To"> {{ gridData.to }}</el-form-item>
        <el-form-item prop="nonce" label="nonce" width="200"> {{ gridData.nonce }}</el-form-item>
        <el-form-item prop="Hash" label="Hash"> {{ gridData.hash }}</el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <div>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-count="totalPage"
      @change="doPageChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watchEffect } from 'vue'
import { TradeControllerService, type TradeQueryRequest } from '../../../generated'
import moment from 'moment'
import axios from 'axios'

const tableData = ref([])
const totalPage = ref(0)
const dialogTableVisible = ref(false)
// 查询参数
const queryParams = ref<TradeQueryRequest>({
  current: 0,
  pageSize: 10,
  blockchainId: '',
  sellerId: '',
  startDate: '',
  endData: ''
})

const gridData = ref({
  blockHash: '0x377a8c0b0c1e709ab872f584f0ed610d8b100d08484521c67102223bb07b837f',
  blockNumber: '15',
  gas: '4300000',
  from: '0x7400568603d5514ec94921d505640c0a4807faf4',
  to: '0xdefe2809a82b2bb91a14abc1298aa9b2cb3092b4',
  nonce: '0x1b55354c8a1330035e0f985f1ef4277866a1982d920d2d92e248a65cb11ee77',
  hash: '0x7e4bb3a48561d7ff7f4dce0f95a7e2e5bc2032ec4d665bb25d5ad5555260a721'
})
/**
 * 加载数据
 */
const getDataList = async () => {
  const res = await TradeControllerService.listMyTradeVoByPageUsingPost(queryParams.value)

  tableData.value = res.data.records

  totalPage.value = Math.floor(
    (Number(queryParams.value.pageSize - 1) + Number(res.data.total)) /
      Number(queryParams.value.pageSize)
  )
}
onMounted(() => {
  getDataList()
})
/**
 * 分页->更新table数据
 * @param page
 */
const doPageChange = (page: any) => {
  queryParams.value.current = page
  getDataList()
}

watchEffect(() => {
  console.log('最大页数', totalPage.value)
})
/**
 * 查询请求
 */
const onSubmit = () => {
  console.log(queryParams.value)
  getDataList()
}

/**
 * 查询详细
 */
const handleEdit = (index: any, row: any) => {
  console.log('row: ', row.blockchainId)
  const transHash = row.blockchainId
  axios.get('/api/WeBASE-Front/1/web3/transaction/' + `${transHash}`).then((res) => {
    gridData.value = res.data
    console.log(gridData.value)
  })
  dialogTableVisible.value = true
}
</script>

<style scoped>
.title {
  height: 40px;

  line-height: 40px;
  background-color: rgb(247, 226, 196);
  padding-left: 20px;
  margin-left: -1%;
}
</style>
